<!--
   Copyright 2020-2021 the original author or authors.

   Licensed under the General Public License, Version 3.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

        https://www.gnu.org/licenses/gpl-3.0.en.html
 -->

<template>
  <nav class="header">
    <div class="container">
      <div class="logo" @click="$router.push('/')">
        <!--          <img src="../assets/logo.png" style="width: 100px; height: 30px;"/>-->
        <div class="logo-text">
          <span class="logo-n1">Z</span>
          <span class="logo-n1">Z</span>
          <span class="logo-n1">U</span>
          <span class="logo-n2">O</span>
          <span class="logo-n2">J</span>
        </div>
        <svg class="logo-back" viewBox="0 0 180 56" width="180" height="56" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="M161 56L166 56L166 48L168 48L168 40L161 40L161 32L172 32L172 24L172 24L172 16L161 16L161 8L154 8L154 0L180 0L180 8L180 8L180 16L180 16L180 24L180 24L180 32L180 32L180 40L180 40L180 48L180 48L180 56L180 56Z" fill="#ffffff"></path><path d="M150 56L152 56L152 48L156 48L156 40L134 40L134 32L159 32L159 24L157 24L157 16L138 16L138 8L134 8L134 0L155 0L155 8L162 8L162 16L173 16L173 24L173 24L173 32L162 32L162 40L169 40L169 48L167 48L167 56L162 56Z" fill="#ebf2e4"></path><path d="M132 56L138 56L138 48L152 48L152 40L129 40L129 32L143 32L143 24L152 24L152 16L123 16L123 8L116 8L116 0L135 0L135 8L139 8L139 16L158 16L158 24L160 24L160 32L135 32L135 40L157 40L157 48L153 48L153 56L151 56Z" fill="#d7e6ca"></path><path d="M127 56L125 56L125 48L139 48L139 40L121 40L121 32L134 32L134 24L147 24L147 16L116 16L116 8L109 8L109 0L117 0L117 8L124 8L124 16L153 16L153 24L144 24L144 32L130 32L130 40L153 40L153 48L139 48L139 56L133 56Z" fill="#c2d9af"></path><path d="M112 56L116 56L116 48L130 48L130 40L114 40L114 32L123 32L123 24L130 24L130 16L111 16L111 8L103 8L103 0L110 0L110 8L117 8L117 16L148 16L148 24L135 24L135 32L122 32L122 40L140 40L140 48L126 48L126 56L128 56Z" fill="#aecc96"></path><path d="M105 56L102 56L102 48L123 48L123 40L107 40L107 32L118 32L118 24L120 24L120 16L102 16L102 8L100 8L100 0L104 0L104 8L112 8L112 16L131 16L131 24L124 24L124 32L115 32L115 40L131 40L131 48L117 48L117 56L113 56Z" fill="#9ac07c"></path><path d="M73 56L82 56L82 48L85 48L85 40L84 40L84 32L100 32L100 24L76 24L76 16L62 16L62 8L57 8L57 0L101 0L101 8L103 8L103 16L121 16L121 24L119 24L119 32L108 32L108 40L124 40L124 48L103 48L103 56L106 56Z" fill="#85b363"></path><path d="M53 56L75 56L75 48L80 48L80 40L75 40L75 32L80 32L80 24L66 24L66 16L55 16L55 8L48 8L48 0L58 0L58 8L63 8L63 16L77 16L77 24L101 24L101 32L85 32L85 40L86 40L86 48L83 48L83 56L74 56Z" fill="#6fa64a"></path><path d="M44 56L39 56L39 48L37 48L37 40L64 40L64 32L46 32L46 24L46 24L46 16L24 16L24 8L39 8L39 0L49 0L49 8L56 8L56 16L67 16L67 24L81 24L81 32L76 32L76 40L81 40L81 48L76 48L76 56L54 56Z" fill="#599a2f"></path><path d="M0 56L0 56L0 48L0 48L0 40L0 40L0 32L0 32L0 24L0 24L0 16L0 16L0 8L0 8L0 0L40 0L40 8L25 8L25 16L47 16L47 24L47 24L47 32L65 32L65 40L38 40L38 48L40 48L40 56L45 56Z" fill="#408d0b"></path></svg>
      </div>
      <Menu mode="horizontal" theme="light" :active-name="$route.path.split('/')[1]">

        <MenuItem name="home" :to="{ name: 'home' }">
          <span class="span__menu">首页</span>
        </MenuItem>
<!--        <MenuItem name="problem" :to="{ name: 'problem' }">
          <span class="span__menu">题库</span>
        </MenuItem>-->
        <MenuItem name="contest" :to="{ name: 'contest' }">
          <span class="span__menu">竞赛</span>
        </MenuItem>

        <MenuItem name="study" :to="{ name: 'study' }">
          <span class="span__menu">学习</span>
        </MenuItem>

<!--        <MenuItem name="submission" :to="{ name: 'submission' }">
          <span class="span__menu">提交记录</span>
        </MenuItem>-->
<!--        <MenuItem name="group" :to="{ name: 'group' }">-->
<!--          <span class="span__menu">Group</span>-->
<!--        </MenuItem>-->
        <div class="navbar-user">
          <template v-if="isLogin">
            <Avatar :src="avatar"/>
            <Dropdown @on-click="onClick">
              <div class="navbar-username">
                {{username}}
                <Icon type="ios-arrow-down"></Icon>
              </div>
              <DropdownMenu slot="list">
                <DropdownItem name="user">个人</DropdownItem>
                <DropdownItem name="logout" divided>登出</DropdownItem>
              </DropdownMenu>
            </Dropdown>
            <template v-if="isAdmin">
              <Divider type="vertical" />
              <a :href="manageUrl" target="_blank">管理</a>
            </template>
          </template>
          <template v-else>
            <Button type="text" @click="toLogin">
              <span class="span__menu">登录</span>
            </Button>
            <Button type="text" @click="toRegist">
              <span class="span__menu">注册</span>
            </Button>
          </template>
        </div>
      </Menu>
    </div>
  </nav>
</template>

<script>
import api from '_u/api';
import { mapGetters } from 'vuex';

import { SDUOJ_ENV } from '_u/env';

export default {
  inject: ['reload'],
  methods: {
    toLogin: function () {
      this.$router.push({
        name: 'login',
        query: {
          to: this.$route.fullPath === '/login' ? '/home' : this.$route.fullPath
        }
      });
    },
    toRegist: function () {
      this.$router.push({
        name: 'register'
      });
    },
    onClick: function (name) {
      if (name === 'logout') {
        this.handleLogout();
      } else if (name === 'user') {
        this.toUser();
      }
    },
    handleLogout: function () {
      api.logout().then(_ => {
        this.$store.dispatch('user/clearProfile');
        // this.reload();
        this.$router.push({ name: 'home' });
      });
    },
    toUser: function () {
      this.$router.push({ name: 'user' });
    }
  },
  computed: {
    ...mapGetters('user', ['isLogin', 'username', 'avatar', 'isAdmin']),
    manageUrl: function() {
      if (SDUOJ_ENV.PROD) {
        return `${location.origin}${process.env.VUE_APP_OJ_MANAGE}`;
      } else {
        return process.env.VUE_APP_OJ_MANAGE;
      }
    }
  },
  mounted: function () {
    console.log('here');
    api.getProfile();
  }
};
</script>

<style lang="less" scoped>
@media screen and ( max-width: 780px ){
  .header {
    .ivu-menu-item {
      padding: 0 5px;
    }
  }
  .ivu-btn {
    margin: 0;
  }
}
  .header {
    width: 100%;
    user-select: none;
    position: fixed;
    z-index: 101;
    height: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    background-color: #fff;
    box-shadow: 0 2px 4px 2px rgba(0,0,0, .1);
    min-width: 680px;
  }

  .logo {
    position: relative;
    height: 56px;
    width: 200px;

    .logo-back {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 180px;
    }

    .logo-text {
      position: relative;
      z-index: 10;
      font-family: "Berlin Sans FB";
      font-weight: 500;
      width: 180px;
      height: 100%;
      text-align: center;
      line-height: 56px;
      font-size: 40px;

      > span {
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .logo-n1 {
        background-image: linear-gradient(to right, #ffffff 50%, #fafafa 75%, transparent);
      }
      .logo-n2 {
        background-image: linear-gradient(to right, #333a33 10%, #323933 90%);
      }

      &:hover {
        cursor: pointer;
      }
    }
  }

  .container {
    display: flex;
  }

  .navbar-user {
    float: right;
    margin: 0;

    .navbar-username {
      margin: auto 8px;
      font-size: 16px;
    }

    :hover {
      cursor: pointer;
    }

    .ivu-btn {
      margin: 0 5px;
    }

    .ivu-btn:hover {
      background: rgba(0, 0, 0, .05);
    }
  }
</style>
